<template>
    <div class="personalRegisterBox">
        <!-- header start-->
        <loginHeader></loginHeader>
        <!-- header end -->
        <div class="public-header">
            <h2 class="public-header-ch">个人注册</h2>
            <p class="public-header-en">PERSONAL SIGN UP</p>
            <div class="public-header-line"></div>
        </div>
        <div class="contentBox">
            <el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm" :label-position="labelPosition" class="demo-ruleForm">
                <div class="forms-line clear">
                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="ruleForm.phone" placeholder="请输入手机号码" ></el-input>
                    </el-form-item>
                    <el-form-item label="手机验证码" prop="phoneCode">
                        <el-input v-model="ruleForm.phoneCode" placeholder="请输入手机验证码" class="right-input"></el-input>
                        <!-- <button type="button" class="right-btn" @click="sendCode()">发送验证码</button> -->
                    </el-form-item>
                    <button type="button" class="right-btn" @click="sendCode()">发送验证码</button>
                </div>
                <!-- 哪里 -->
                <div class="forms-line clear"> 
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码确认" prop="checkPassword">
                        <el-input type="password" v-model="ruleForm.checkPassword" placeholder="请再次输入密码" auto-complete="off" ></el-input>
                    </el-form-item>
                </div>
                <p class="form-word">完善以下信息，将帮助您享受到更佳学习成长和课程体验:</p>
                <div class="forms-line clear">
                    <el-form-item label="真实姓名" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入姓名" ></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex" class="forms-sex">
                        <!-- <el-select v-model="ruleForm.sex" placeholder="男">
                            <el-option label="男" value="male"></el-option>
                            <el-option label="女" value="female"></el-option>
                        </el-select> -->
                        <select class="form-sex" placeholder="男" v-model="ruleForm.sex" @blur="validatesex('sex')" @change="validatesex('sex')">
                          <option class="form-default" value="" disabled selected hidden>男</option>
                          <option v-for="(sexList,index) in sexLists" v-bind:value="sexList.value" :key="index">{{sexList.text}}</option>                
                        </select>
                        <div class="cue" v-show="sexErr">请输入性别</div>
                    </el-form-item>
                </div>
                <div class="forms-line clear"> 
                    <el-form-item label="职位" prop="position" class="forms-position">
                        <select class="form-position" placeholder="请选择" v-model="ruleForm.position" @blur="validateposition('position')" @change="validateposition('position')">
                          <option class="form-default" value="0" disabled selected hidden>请选择</option>
                          
                          <option v-for="positionList in positionLists" v-bind:value="positionList.id" :key="positionList.id">{{positionList.positionName}}</option>                
                        </select>
                        <div class="cue" v-show="positionErr">请输入职位</div>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age" class="forms-sex">
                        <select class="form-sex" placeholder="1-3年" v-model="ruleForm.age" @blur="validateage('age')" @change="validateage('age')">
                          <option class="form-default" value="" disabled selected hidden>1-3年</option>
                          <option v-for="(ageList,index) in ageLists" v-bind:value="ageList.value" :key="index">{{ageList.text}}</option>                
                        </select>
                        <div class="cue" v-show="ageErr">请输入年龄</div>
                    </el-form-item>
                </div>
                <el-form-item class="modifypas">
                    <!-- <el-button type="primary" class="resetPsd"><router-link :to="{name:'personal-register-success'}">提交注册</router-link></el-button> -->
                    <el-button type="primary" class="resetPsd" @click="regist()">提交注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
// 引用loginHeader
import loginHeader from '../components/loginHeader.vue'
  export default {
    data(){
      // 手机号验证
      let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      // reg.test()
      let checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        }
        setTimeout(() => {
          if (!reg.test(this.ruleForm.phone)) {
              callback(new Error('请输入正确手机号'));
            } 
            callback();
        }, 500);
      };
      // 验证码 验证
      let  checkPhonecode = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入验证码'));
        }
        callback();
        // setTimeout(() => {
        //   if(this.ruleForm.phoneCode !== '') {
        //         this.$refs.ruleForm.validateField('checkPhonecode');
        //     }
        //     callback();
        // }, 500);
      };
      // 密码验证
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPassword !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      // 确认密码验证
      let validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入的密码不一致!'));
        } else {
          callback();
        }
      };
      // 姓名验证
      let name = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('请输入姓名'));
        }
        callback();
      };
      // // 性别验证
      // let sex = (rule, value, callback) => {
      //   if (value === '') {
      //     return callback(new Error('请输入性别'));
      //   }
      //   callback();
      // };
      // // 职位验证
      // let position = (rule, value, callback) => {
      //   if (value === '') {
      //     return callback(new Error('请输入职位'));
      //   }
      //   callback();
      // };
      // // 年龄验证
      // let age = (rule, value, callback) => {
      //   if (value === '') {
      //     return callback(new Error('请输入年龄'));
      //   }
      //   callback();
      // };
      return{
      //验证为空提示
        // 性别验证
        sexErr:false,
        sexLists:[
          {
             text:'男', value:'男'
          },
           {
             text:'女', value:'女'
          },
        ],
        // 职位验证
        positionErr:false,
        positionLists:[
          // {
          //    positionName:'商务拓展经理1', 
          // },
           
        ],
        // 年龄验证
        ageErr:false,
        ageLists:[
          {
             text:'1', value:1
          },
           {
             text:'2', value:2
          },
           {
             text:'3', value:3
          },
        ],
        // 对齐方式
        labelPosition:'top',
        // status-icon:true,
        ruleForm:{
          phone:'',
          phoneCode:'',
          password:'',
          checkPassword:'',
          name:'',
          sex:'',
          position:'',
          age:'',
        },
        rules:{
            phone:[
             { validator: checkPhone, trigger: 'blur', required: true, }
           ],
           phoneCode:[
            { validator: checkPhonecode, trigger: 'blur', required: true, }
          ],
           password: [
            { validator: validatePass, trigger: 'blur',  required: true, }
          ],
           checkPassword: [
            { validator: validatePass2, trigger: 'blur',  required: true,  }
          ],
           name:[
             { validator: name, trigger: 'blur', required: true, }
           ],
          //  sex:[
          //    { validator: sex, trigger: 'blur', required: true, }
          //  ],
          //  position:[
          //    { validator: position, trigger: 'blur', required: true, }
          //  ],
          //  age:[
          //    { validator: age, trigger: 'blur', required: true, }
          //  ],
        },
      }
    },
    // 注册lgoinHeader 组件
    components: {
      loginHeader
    },
    methods: {
      // 性别验证
      validatesex:function(){
        if(this.ruleForm.sex == ''){
            this.sexErr = true;
          }else{
            this.sexErr = false;
        }
      },
      // 职位验证
      validateposition:function(){
         if(this.ruleForm.position == ''){
            this.positionErr = true;
          }else{
            this.positionErr = false;
        }
      },
      // 年龄验证
      validateage:function(){
        if(this.ruleForm.age == ''){
            this.ageErr = true;
          }else{
            this.ageErr = false;
        }
      },

      // 发送验证码
      sendCode:function(){
        let data = {
          mobile: this.ruleForm.phone
        }
        this.$http.registSendCode(data,(res)=>{
          if(res.errCode == 0){
            this.$message.success('发送成功');
            
          }else{
            this.$message.error('发送失败');
           
          }
           console.log(res)
        },(errRes)=>{
          console.log(errRes)
        })
      },

      //个人注册
      regist:function(){
        let data = {
          mobile: this.ruleForm.phone,
          mobileCode: this.ruleForm.phoneCode,
          password: md5(this.ruleForm.password),
          name: this.ruleForm.name,
          gender: this.ruleForm.sex,
          age: this.ruleForm.age,
          position:  this.ruleForm.position,
          inviteCode: this.getUrlParam(),
        }
        console.log(data);
        this.$http.regist(data,(res)=>{
          if(res.errCode == 0){
           this.$router.push('/personal-register-success');
          }else{
            this.$message.error(res.message);
          }
           console.log(res)
        },(errRes)=>{
          console.log(errRes)
        })
      },

      // 截取
       getUrlParam: function () {
        var name,value;
        var str=location.href; //取得整个地址栏
        var num=str.indexOf("?");
        str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]
    
        var arr=str.split("&"); //各个参数放到数组里
        for(var i=0;i < arr.length;i++){
            num=arr[i].indexOf("=");
            if(num>0){
                name=arr[i].substring(0,num);
                value=arr[i].substr(num+1);
                this[name]=value;
            }
        }
        return value;
      },

      // 获取所有职位
      getPosition(){
        this.$http.getPosition(null,(res)=>{
          this.positionLists = res.data
          console.log(res)
        },(errRes)=>{
          console.log(errRes)
        })
      },
    },
    mounted(){
      this.getPosition();
    }
  }
</script>

